<template>
  <el-form ref="formRef" class="login-manual-login" label-width="0px" :model="formModel" :rules="rules">
    <h3>人工登录</h3>
    <el-form-item prop="token">
      <el-input v-model="formModel.token" clearable rows="5" type="textarea" placeholder="请输入token" style="width: 500px" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" style="width: 500px" size="large" @click="onClickManualLogin">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { setToken, removeToken, appLoginHandler } from '@/modules/app-gateway';
import { oauthUserInfo } from '@/api/oauth.js';
defineOptions({ name: 'ManualLogin' });

const formModel = reactive({
  token: ''
});

const rules = reactive({
  token: [{ required: true, message: '请输入有效token' }]
});

const formRef = ref();

const onClickManualLogin = async () => {
  await formRef.value.validate();
  console.log('formModel.token', formModel.token);
  /** 替换所有双引号，不用手动再删除 */
  const formattedToken = formModel.token.replaceAll('"', '');
  setToken(formattedToken);
  const { err } = await oauthUserInfo();
  if (err) {
    removeToken();
  } else {
    appLoginHandler(formattedToken);
  }

};
</script>

<style lang="scss" scoped>
.login-manual-login {
  text-align: center;

  h3 {
    margin-bottom: 20px;
  }
}
</style>
